<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/css.css">

<title>Insert title here</title>


</head>
<body>
	<p style="text-align: center; font-size: 1.5rem;">用户信息列表</p>
	<div class="container-fluid">
		<div class="row">
			<div class="col-2"></div>
			<div class="col-8">
				姓名<input class="form-control" type="text" id="userName"
					name="userName"> 籍贯<input class="form-control" type="text"
					id="addr" name="addr"> 邮箱<input class="form-control"
					type="text" id="email" name="email"> <input name="" id=""
					class="btn btn-primary" type="button" onclick="search()" value="查询">

				<table class="table table-light" style="margin-top: 0.5rem;">
					<tbody>
						<tr>
							<td>编号</td>
							<td>姓名</td>
							<td>性别</td>
							<td>年龄</td>
							<td>籍贯</td>
							<td>QQ</td>
							<td>邮箱</td>
							<td>操作</td>
						</tr>
					</tbody>
					<tfoot id="ft">

					</tfoot>

				</table>
			</div>
			<div class="col-2"></div>
		</div>

	</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</script>
<script>
	function search() {
		var userName = $("#userName").val();
		var addr = $("#addr").val;
		var email = $("#email").val;

		$.post("SearchList", {
			"data": new Date().getDate(),
			"userName" : userName,
			"addr" : addr,
			"email" : email
		}, function(data) {

			var dataJson = JSON.parse(data);


			 for(var i=0 in dataJson) {


				var id = dataJson[i].id;
				var userName = dataJson[i].userName;
				var sex = dataJson[i].sex;
				var age = dataJson[i].age;
				var addr = dataJson[i].addr;
				var QQ = dataJson[i].qq;
				var email = dataJson[i].email;

				$("#ft").html(
						"<tr> <td>" + id + "</td><td>" + userName + "</td><td>" + sex + "</td><td>" + age + "</td><td>" + addr + "</td><td>" + QQ + "</td><td>" + email + "</td><td>"+'<input type="button" onclick="delUser('+id+')" class="btn btn-default" value="删除">'+"</td></tr>"
				)
				 // while(i==dataJson.length){
					//  $("#ft").html(
					// 		 "<tr> <td>" + id + "</td><td>" + userName + "</td><td>" + sex + "</td><td>" + age + "</td><td>" + addr + "</td><td>" + QQ + "</td><td>" + email + "</td></tr>"
					//  )
				 // }
			 }
		})

	}
	function delUser(id) {
		if(confirm("是否删除")) {
			$.post("DelUsers", {"data": new Date().getDate(),"id": id}, function (data) {
						alert(data);
					}
			)
		}
	}
</script>
</html>
